<!-- 专题详情页面 -->
<template>
    <view class="">
        <!-- 顶部加载布局 -->
        <view class="box-loading" v-show="!subjectDetails.length">
            <uni-load-more status="loading"></uni-load-more>
        </view>
        <!-- 专题内容布局 -->
        <view class="box-content box-grid-3">
            <view class="box-content-item" v-for="item in subjectDetails" :key="item._id"
                @click="onImageDetail(item._id)">
                <image :src="item.smallPicurl" mode="aspectFill"></image>
            </view>
        </view>
        <!-- 底部加载布局 -->
        <view class="box-loading" v-show="subjectDetails.length || isNoData">
            <uni-load-more :status="isNoData ? 'noMore' : 'loading'"></uni-load-more>
        </view>
    </view>
</template>

<script lang="ts" setup>
    //导入
    import { ref } from "vue";
    import { onLoad, onReachBottom, onPullDownRefresh, onUnload } from "@dcloudio/uni-app";
    import { navigateTo, setNavigationBarTitle } from "@/utils/uni-api.ts";
    import { url_image_detail } from "@/utils/url.ts";
    import { gotoHome } from "@/utils/common.ts";
    import { api_getSubjectDetail, api_getUserOperation } from "@/api/api.ts";

    //参数
    let subjectId = ref("");
    let subjectDetails = ref([]);
    let type = ref("");
    let pageParam = ref({ pageNum: 1, pageSize: 12 });
    let isNoData = ref(false);

    //内部事件
    //点击图片
    function onImageDetail(id : string) {
        navigateTo({ url: url_image_detail + "?id=" + id });
    };
    //重置
    function init() {
        subjectDetails.value = [];
        pageParam.value = { pageNum: 1, pageSize: 12 };
        isNoData.value = false;
    };

    //页面生命周期
    //页面加载
    onLoad((e) => {
        let { type: eType = "", name: eName = "", id: eId = "" } = e;
        //类型为空查询专题详情
        if (eType === "") {
            //ID为空跳转首页
            if (eId === "") {
                gotoHome();
                return;
            };
            subjectId.value = eId;
        } else {
            type.value = eType;
        };
        getSubjectDetail();
        setNavigationBarTitle({ title: eName });
    });
    //触底加载更多
    onReachBottom(() => {
        //不存在新数据时，不再进行查询
        if (isNoData.value) {
            return;
        }
        pageParam.value.pageNum++;
        getSubjectDetail();
    });
    //下拉刷新
    onPullDownRefresh(() => {
        init();
        getSubjectDetail().finally(() => {
            uni.stopPullDownRefresh();
        });
    });
    //页面卸载
    onUnload(() => {
        uni.removeStorageSync("subjectDetails");
    });

    //网络请求
    //获取专题详情
    async function getSubjectDetail() {
        let res : any;
        //类型为空查询专题详情
        if (type.value === "") {
            res = await api_getSubjectDetail({
                "classid": subjectId.value,
                "pageNum": pageParam.value.pageNum,
                "pageSize": pageParam.value.pageSize
            });
        } else {
            res = await api_getUserOperation({
                "type": type.value,
                "pageNum": pageParam.value.pageNum,
                "pageSize": pageParam.value.pageSize
            });
        }
        if (pageParam.value.pageSize > res.data.length) {
            isNoData.value = true;
        };
        subjectDetails.value = [...subjectDetails.value, ...res.data];
        uni.setStorageSync("subjectDetails", subjectDetails.value);
    };
</script>

<style lang="scss" scoped>
    @import "@/common/css/common.css";

    .box-content {
        padding: 0 30rpx;

        .box-content-item {
            height: 440rpx;

            image {
                width: 100%;
                height: 100%;
                border-radius: 10rpx;
            }
        }
    }
</style>